<template>
  <ArtTableFullScreen>
    <div id="table-full-screen">
      <el-card shadow="never" class="art-table-card">
        <ArtTableHeader
          :columnList="columnOptions"
          v-model:columns="columnChecks"
          @refresh="handleRefresh"
        >
          <template #left>
            <ElButton :icon="Plus" @click="handleRouter('add')">新增</ElButton>
            <el-select
              style="width: 200px; margin-left: 10px"
              v-model="queryParams.cate_id"
              @change="getPage"
            >
              <el-option
                v-for="type in typeList"
                :key="type.id"
                :label="type.name"
                :value="type.id"
              ></el-option>
            </el-select>
          </template>
        </ArtTableHeader>
        <art-table
          :data="tableData"
          :loading="loading"
          v-model:currentPage="queryParams.page"
          v-model:pageSize="queryParams.size"
          :total="total"
          @size-change="getPage"
          @current-change="getPage"
        >
          <template #default>
            <el-table-column v-for="col in columns" :key="col.prop || col.type" v-bind="col" />
          </template>
        </art-table>
      </el-card>
      <Annex ref="annexRef" :type="1"></Annex>
    </div>
  </ArtTableFullScreen>
</template>

<script setup lang="ts">
  import { h } from 'vue'
  import { ElButton } from 'element-plus'
  import { ElMessageBox, ElMessage } from 'element-plus'
  import { useCheckedColumns } from '@/composables/useCheckedColumns'
  import { Plus, Edit, Delete, View, Document } from '@element-plus/icons-vue'
  import { ContentService } from '@/api/common'
  import { TypeService } from '@/api/common/type'
  import ArtImagePreview from '@/components/image/ArtImagePreview.vue'
  import RichText from '@/components/rich-text/index.vue'

  const loading = ref(false)
  const tableData = ref<any>([])
  const annexRef = ref(null)

  const router = useRouter()

  // 页面跳转
  const handleRouter = (type: string, row?: any) => {
    router.push(
      `/art-detail?type=${type}&id=${row?.id || ''}&cate_id=${queryParams.cate_id}&show=1`
    )
  }

  const total = ref(0)
  const queryParams = reactive({
    page: 1,
    size: 10,
    cate_id: 25
  })
  const typeList = ref<any>([])
  const pid = 24
  onMounted(() => {
    getTypes().then(() => {
      getPage()
    })
  })
  // 刷新
  const handleRefresh = () => {
    getPage()
  }
  // 列配置
  const columnOptions = [
    { label: '勾选', type: 'selection' },
    { label: 'ID', prop: 'id' },
    { label: '标题', prop: 'title' },
    { label: '封面', prop: 'cover' },
    { label: '内容', prop: 'content' },
    { label: '描述', prop: 'desc' },
    { label: '创建日期', prop: 'create_time' },
    { label: '操作', prop: 'operation' }
  ]
  // 动态列配置
  const { columnChecks, columns } = useCheckedColumns(() => [
    { prop: 'id', label: 'ID', align: 'center', width: 80 },
    { prop: 'title', label: '标题', align: 'center' },
    {
      prop: 'cover',
      label: '封面',
      align: 'center',
      formatter: (row: any) => {
        return h(ArtImagePreview, { src: row.cover })
      }
    },
    {
      prop: 'content',
      label: '内容',
      align: 'center',
      showOverflowTooltip: true,
      formatter: (row) => {
        return h(RichText, { html: row.content })
      }
    },
    { prop: 'views', label: '阅读量', align: 'center' },
    { prop: 'create_time', label: '创建日期', align: 'center' },
    {
      prop: 'operation',
      label: '操作',
      width: 200,
      align: 'center',
      fixed: 'right', // 固定在右侧
      formatter: (row: any) => {
        return h('div', { class: 'option' }, [
          h(
            ElButton,
            {
              icon: Edit,
              text: true,
              size: 'small',
              onClick: () => handleRouter('edit', row)
            },
            () => '编辑'
          ),
          h(
            ElButton,
            {
              icon: Delete,
              type: 'danger',
              text: true,
              size: 'small',
              onClick: () => deleteTableRow(row)
            },
            () => '删除'
          ),
          h(
            ElButton,
            {
              icon: View,
              text: true,
              size: 'small',
              onClick: () => handleRouter('detail', row)
            },
            () => '详情'
          ),
          h(
            ElButton,
            {
              icon: Document,
              size: 'small',
              text: true,
              onClick: () => handleAnnex(row)
            },
            () => '附件'
          )
        ])
      }
    }
  ])

  // 附件
  const handleAnnex = (row: any) => {
    annexRef.value.openList(row.id, row.cover)
  }

  // 获取分类
  const getTypes = async () => {
    const res = await TypeService.getChildCate(pid)
    queryParams.cate_id = res.data[0].id
    typeList.value = res.data
  }
  // 获取商品列表
  const getPage = async () => {
    loading.value = true
    const res = await ContentService.getListContent(queryParams)
    total.value = res.data.total
    tableData.value = res.data.data
    loading.value = false
  }

  const deleteTableRow = (row: any) => {
    ElMessageBox.confirm('确定要删除该列吗？', '删除列表', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'error'
    })
      .then(() => {
        return ContentService.deleteContent(row.id)
      })
      .then(() => {
        getPage()
        ElMessage.success('删除成功')
      })
  }
</script>
<style lang="scss" scoped>
  :deep(.option .el-button + .el-button) {
    margin-left: 0;
  }
</style>
